<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>价格设置 - 王掌柜黄金</title>
    <style>
        body {
            background-color: #1E1E1E;
            color: gold;
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .setting-group {
            margin-bottom: 20px;
            padding: 15px;
            background: #333;
            border-radius: 8px;
        }
        .setting-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .setting-group input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid gold;
            background: #1E1E1E;
            color: gold;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background: gold;
            color: #1E1E1E;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }
        button:hover {
            background: #ffcc00;
        }
        .status {
            text-align: center;
            margin-top: 15px;
            color: #ccc;
        }
        .nav-buttons {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
        }
        .nav-buttons a {
            color: gold;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav-buttons">
            <a href="index.html">&lt; 返回行情页面</a>
            <a href="admin.html">管理设置</a>
        </div>

        <h2>价格加价设置</h2>

        <div class="setting-group">
            <label>黄金加价 (元/克)</label>
            <input type="number" id="goldMarkup" value="0">
        </div>

        <div class="setting-group">
            <label>18K金加价 (元/克)</label>
            <input type="number" id="k18Markup" value="0">
        </div>

        <div class="setting-group">
            <label>铂金加价 (元/克)</label>
            <input type="number" id="ptMarkup" value="0">
        </div>

        <div class="setting-group">
            <label>钯金加价 (元/克)</label>
            <input type="number" id="pdMarkup" value="0">
        </div>

        <div class="setting-group">
            <label>白银加价 (元/克)</label>
            <input type="number" id="agMarkup" value="0">
        </div>

        <button onclick="saveSettings()">保存设置</button>

        <div id="status" class="status"></div>
    </div>

    <script>
        // IndexedDB配置与操作
        const DB_NAME = 'priceSettingsDB';
        const DB_VERSION = 1;
        const STORE_NAME = 'priceMarkups';
        let db;

        // 打开数据库连接
        function openDatabase() {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open(DB_NAME, DB_VERSION);

                request.onupgradeneeded = function(event) {
                    const db = event.target.result;
                    // 如果不存在则创建存储库
                    if (!db.objectStoreNames.contains(STORE_NAME)) {
                        const objectStore = db.createObjectStore(STORE_NAME, { keyPath: 'id' });
                        objectStore.add({ id: 'markups', data: {
                            goldMarkup: 0,
                            k18Markup: 0,
                            ptMarkup: 0,
                            pdMarkup: 0,
                            agMarkup: 0
                        }});
                    }
                };

                request.onsuccess = function(event) {
                    db = event.target.result;
                    resolve(db);
                };

                request.onerror = function(event) {
                    reject(new Error('数据库打开失败: ' + event.target.error));
                };
            });
        }

        // 获取价格加价数据
        function getMarkups() {
            return new Promise((resolve, reject) => {
                if (!db) {
                    return openDatabase().then(() => getMarkups()).then(resolve).catch(reject);
                }

                const transaction = db.transaction([STORE_NAME], 'readonly');
                const objectStore = transaction.objectStore(STORE_NAME);
                const request = objectStore.get('markups');

                request.onsuccess = function(event) {
                    const result = event.target.result;
                    resolve(result ? result.data : {
                        goldMarkup: 0,
                        k18Markup: 0,
                        ptMarkup: 0,
                        pdMarkup: 0,
                        agMarkup: 0
                    });
                };

                request.onerror = function(event) {
                    reject(new Error('获取加价数据失败: ' + event.target.error));
                };
            });
        }

        // 保存价格加价数据
        function saveMarkups(markups) {
            return new Promise((resolve, reject) => {
                if (!db) {
                    return openDatabase().then(() => saveMarkups(markups)).then(resolve).catch(reject);
                }

                const transaction = db.transaction([STORE_NAME], 'readwrite');
                const objectStore = transaction.objectStore(STORE_NAME);
                const request = objectStore.put({ id: 'markups', data: markups });

                request.onsuccess = function(event) {
                    resolve();
                };

                request.onerror = function(event) {
                    reject(new Error('保存加价数据失败: ' + event.target.error));
                };
            });
        }

        // 加载设置
        async function loadSettings() {
            try {
                const markups = await getMarkups();
                document.getElementById('goldMarkup').value = markups.goldMarkup || 0;
                document.getElementById('k18Markup').value = markups.k18Markup || 0;
                document.getElementById('ptMarkup').value = markups.ptMarkup || 0;
                document.getElementById('pdMarkup').value = markups.pdMarkup || 0;
                document.getElementById('agMarkup').value = markups.agMarkup || 0;
            } catch (err) {
                console.error('加载设置失败:', err);
                document.getElementById('status').textContent = '加载设置失败';
                setTimeout(() => {
                    document.getElementById('status').textContent = '';
                }, 2000);
            }
        }

        // 保存设置
        async function saveSettings() {
            try {
                const markups = {
                    goldMarkup: parseFloat(document.getElementById('goldMarkup').value) || 0,
                    k18Markup: parseFloat(document.getElementById('k18Markup').value) || 0,
                    ptMarkup: parseFloat(document.getElementById('ptMarkup').value) || 0,
                    pdMarkup: parseFloat(document.getElementById('pdMarkup').value) || 0,
                    agMarkup: parseFloat(document.getElementById('agMarkup').value) || 0
                };

                await saveMarkups(markups);
                document.getElementById('status').textContent = '设置已保存';
                setTimeout(() => {
                    document.getElementById('status').textContent = '';
                }, 2000);
            } catch (err) {
                console.error('保存设置失败:', err);
                document.getElementById('status').textContent = '保存设置失败';
                setTimeout(() => {
                    document.getElementById('status').textContent = '';
                }, 2000);
            }
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            openDatabase().then(loadSettings).catch(err => {
                console.error('数据库初始化失败:', err);
                loadSettings(); // 尝试在没有数据库的情况下加载默认设置
            });
        });
    </script>
</body>
</html>